<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预付费页面</title>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
<link rel="stylesheet" href="../../src/dist/css/page.css">


<body>
<div class="weui-cells pay-page">
    <div class="weui-cells__tips">付费页面</div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconzhanghao"></i>
        </div>
        <div class="weui-cell__bd">
            <p>用户号</p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="usercode">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconyonghuming"></i>
        </div>
        <div class="weui-cell__bd">
            <p>用户名</p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="username">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont icongongsi"></i>
        </div>
        <div class="weui-cell__bd">
            <p>所属公司</p>
        </div>
        <!--<div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="branchname">
            <textarea class="weui-textarea" rows="2" disabled id="branchname"></textarea>
        </div>-->
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input input-branchname" type="text" disabled id="branchname">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconjiage"></i>
        </div>
        <div class="weui-cell__bd">
            <p>气价</p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="price">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconjine"></i>
        </div>
        <div class="weui-cell__bd">
            <p class="balanceName"></p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="balance">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconxuanze"></i>
        </div>
        <div class="weui-cell__bd">
            <p>选择</p>
        </div>
        <div class="weui-cell__bd">
            <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default" onclick="chooseVolumn()">点击选择充气量</a>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconicon-jinriyongqiliang"></i>
        </div>
        <div class="weui-cell__bd">
            <p>充气量(m³)</p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入充气量" id="volumn" onblur="volumnBlur()">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <i class="iconfont iconyue"></i>
        </div>
        <div class="weui-cell__bd">
            <p>金额(元)</p>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input" type="text" disabled id="amount">
        </div>
    </div>

    <div class="button_sp_area">
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" onclick="ccbPay('qr')">二维码支付</a>
        <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" onclick="ccbPay('card')">建行卡支付</a>

    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- Dist -->
<script src="../../src/dist/js/index.js"></script>
<script src="../../src/dist/js/utils.js"></script>
<script src="../../src/dist/js/request.js"></script>

<script>
	var usercode = '';
	var userinfo = {
			usercode: '',
			name: '',
			branchname: '',
			price: '',
			balance: 0,
			balancename: '',
			customid: '',
			meterid: ''
		},
    dataForm = {
			amount: 0,
			volumn:0
		} ;
	$(function () {
		usercode = getQueryString("usercode");
		if (usercode !== null && usercode !== undefined && usercode !== "") {
			// 获取基本信息
			getdata_info();
		}
	});

    function getdata_info() {
        get("/gasuser/custom/getTransUserByUsercode?usercode=" + usercode, {}, function (data) {
            if (data.code === 0) {
                const _data = data.data[0];
            console.log(_data)
                $("#usercode").val(_data.usercode)
                $("#username").val(_data.name)
                $("#branchname").val(_data.branchname)
                $("#price").val(_data.price)
                $("#balance").val(_data.balance)

                userinfo.usercode = _data.usercode
                userinfo.name = _data.name
                userinfo.branchname = _data.branchname
                userinfo.price = _data.price
                userinfo.balance = _data.balance
                userinfo.customid = _data.id
                userinfo.meterid = _data.meterid
                if (_data.balance !== null) {
                    if (_data.balance > 0) {
                        userinfo.balancename = '当前欠费'
                    } else {
                        userinfo.balancename = '当前余额'
                        _data.balance = -_data.balance
                    }
                }
                $(".balanceName").html(userinfo.balancename)
            } else {
                $.toast('获取用户数据失败!', 'forbidden');
            }
        }, false, true);
    }
    // 根据气量换算金额
    function volumnBlur(){
		dataForm.volumn = $("#volumn").val()
      if(dataForm.volumn === ''){
        $.toast("气量不能为空", "text")
        return
      }
        get('/gasuser/custom/getFeeByVolumn?customid=' + userinfo.customid + '&volumn=' + dataForm.volumn, {}, function (data) {
            if (data.code === 0) {
                let amount = data.data
                dataForm.amount = amount
              $("#amount").val(amount)
            } else {
                $.toast(data.msg, 'forbidden')
            }
        }, false, true);
    }
    // 点击选择充气量
    function chooseVolumn(){
			$.actions({
				actions: [{
					text: "50m³",
					onClick: function () {
						//do something
                        $("#volumn").val(50)
                        volumnBlur()
					}
				}, {
                    text: "100m³",
                    onClick: function () {
                        //do something
											$("#volumn").val(100)
											volumnBlur()
                    }
                }, {
                    text: "200m³",
                    onClick: function () {
                        //do something
											$("#volumn").val(200)
											volumnBlur()
                    }
                }, {
                    text: "300m³",
                    onClick: function () {
                        //do something
											$("#volumn").val(300)
											volumnBlur()
                    }
                },]
			});
    }
    // 支付
    function ccbPay(paytype) {
        get('/gasuser/custom/getFeeByVolumn?customid=' + userinfo.customid + '&volumn=' + dataForm.volumn, {}, function (data) {
            if (data.code === 0) {
                  let amount = data.data
                  let saveDataForm = {
                    customid: userinfo.customid,
                    meterid: userinfo.meterid,
                    branchname: userinfo.branchname,
                    amount: amount,
                    paytype: paytype
                  }
                post('/wechat/fee/ccbPayOrder', JSON.stringify(saveDataForm), function (data) {
                    if (data.code != 0) {
                        $.toast(data.msg, 'forbidden')
                        return
                    }else{
                        location.replace(data.data)
                    }
                }, false, true);
            } else {
                $.toast(data.msg, 'forbidden')
            }
        }, false, true);

    }
</script>
</body>
</html>
